<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<!--
* Copyright 2010-2011 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div data-bb-type="screen" data-bb-effect="fade">
    <div id="foo" data-bb-type="title" data-bb-caption="My GPA Ambition" data-bb-back-caption="<<" data-bb-action-caption="+" onactionclick="bb.pushScreen('addCourse.htm', 'dataOnTheFlyNewCourse');"></div>

    <script id="pillButtonsJS" src="js/pillButtons.js" ></script>
    <script id="actionBarJS" src="js/actionBar.js"></script>


    <div data-bb-type="pill-buttons" id="myPillButtons">
        <div data-bb-type="pill-button" data-bb-selected="true" onclick="selectGPA()">GPA</div>
        <div data-bb-type="pill-button" onclick="selectAmbition()">Ambition</div>
        <div data-bb-type="pill-button" onclick="selectScore()">Score</div>
    </div>
    <!--waiting Scroller -->
    <div id="waiting" style="text-align:center;padding-top:50px;padding-bottom:50px;">
        <div id="bb10Loading" class="center" id="actind" data-bb-type="activity-indicator" data-bb-size="medium"></div>
        <div><p>loading..</p></div>
    </div>
    <div data-bb-type="round-panel" id="Ambition"  style="display:none" > 
        <div data-bb-type="scroll-panel" style="height:650px;" id="AmbitionInside">
            <div data-bb-type="label-control-container">
                <div data-bb-type="row">
                    <div data-bb-type="label">Current GPA : </div> 
                    <input type="text" id="inputCurrentGPA" value="" />
                </div> 
                <div data-bb-type="row">
                    <div data-bb-type="label">Credits Completed : </div> 
                    <input type="text" id="inputCreditsCompleted" value="" />
                </div> 
                </br>
                <div data-bb-type="row">
                    <div data-bb-type="label">Retrieve GPA & credits from Database</div>
                    <div data-bb-type="button"  onclick="retrieveCurrentGPACredits()">Retrieve</div>
                </div>
                <div data-bb-type="row">
                    <div data-bb-type="label">Target GPA : </div>       
                    <input type="text" id="inputWantedGPA" value="" />
                </div>
                <div data-bb-type="row">
                    <div data-bb-type="label">Credits Left : </div>       
                    <input type="text" id="inputCreditsLeft" value="" />
                </div>
                <div data-bb-type="row">
                    <div data-bb-type="label"></div>
                    <div data-bb-type="button" data-bb-style="stretch" onclick="calculateAmbition()">Calculate!</div>
                </div>
                <div data-bb-type="row">
                    <div data-bb-type="label" style="text-align:center"></div>
                </div>
            </div>
        </div>
    </div>

    <div data-bb-type="round-panel" id="AmbitionResult"  style="display:none" > 
        <div data-bb-type="label-control-container">
            <div data-bb-type="label" id="openingText" style="text-align:center">Fill in the fields and click "Calculate!" to see how much GPA needed to reach your target.</div>
            <div data-bb-type="row">
                <div id="resultOpening"data-bb-type="label" style="text-align:center"></div>
            </div>
            <div data-bb-type="row">
                <div id="gpaAmbitionResult" data-bb-type="label"  style="text-align:center"></div>
            </div>
            <div data-bb-type="row">
                <div id ="creditsLeft"data-bb-type="label" style="text-align:center"></div>
            </div>
        </div>
    </div>

    <div data-bb-type="round-panel" id="Score" style="display:none">
        <div data-bb-type="button" data-bb-style="stretch" onclick="bb.pushScreen('addSection.htm', 'addSection');">Add New Section</div>
    </div>

    <div data-bb-type="round-panel" id="ScorePanel" style="display:none">
        <div data-bb-type="scroll-panel" style="height:480px;" style="display:none">
            <div data-bb-type="image-list" data-bb-images="none" data-bb-style="arrowbuttons">
                <div data-bb-type="item" onbtnclick="bb.pushScreen('editSection.htm', 'editSection');" data-bb-title="Presence" data-bb-accent-text="5%">You got : 90%</div> 
                <div data-bb-type="item" onbtnclick="bb.pushScreen('editSection.htm', 'editSection');" data-bb-title="Homework" data-bb-accent-text="15%">You got : 80%</div>
                <div data-bb-type="item" onbtnclick="bb.pushScreen('editSection.htm', 'editSection');" data-bb-title="Project" data-bb-accent-text="20%">You got : 70%</div> 
                <div data-bb-type="item" onbtnclick="bb.pushScreen('editSection.htm', 'editSection');" data-bb-title="Mid Term" data-bb-accent-text="30%">You got : 50%</div> 
                <div data-bb-type="item" onbtnclick="bb.pushScreen('editSection.htm', 'editSection');" data-bb-title="Final Term" data-bb-accent-text="30%">You got : 50%</div>		
            </div>

        </div>
    </div>

    <div data-bb-type="round-panel" id="ScoreResult" style="display:none">
        <div data-bb-type="row">
            <div data-bb-type="button" data-bb-style="stretch" onclick="">Calculate!</div>
        </div>
        <div data-bb-type="row">
            <div data-bb-type="label" style="text-align:center">You will get 87.55%.</div>    
        </div>
    </div>

    <!--GPA Field -->
    <div data-bb-type="round-panel" id="GPARecap">

    </div>

    <div data-bb-type="round-panel" id="ListSemesterRecap">
        <div data-bb-type="scroll-panel" style="height:600px;">
            <div data-bb-type="image-list" data-bb-images="none" data-bb-style="arrowbuttons" id="ArrowListSemesterRecap">
                <!--                <div data-bb-type="item" onbtnclick="bb.pushScreen('Semester.htm', 'Semester');" data-bb-title="2012-Second" data-bb-accent-text="4.000">2 Credits, 1 Course</div>-->
            </div>
        </div>
    </div>

    <div data-bb-type="action-bar">
        <div data-bb-type="action" data-bb-style="button"  data-bb-img="images/ic_help.png" onclick="bb.pushScreen('info.htm', 'info');">Help</div>
        <div data-bb-type="action" data-bb-style="button"  data-bb-img="images/ic_settings.png" onclick="bb.pushScreen('settings.htm', 'dataOnTheFlySetting');">Settings</div>	
    </div>
</div>

